import React, { useEffect, useState } from 'react';
import {
  Form,
  Input,
  Button,
  Checkbox,
  Select,
  InputNumber,
  DatePicker,
  Space,
} from 'antd';
import { getExamType, getExamSubject } from '@/services/index';
import './_addExam.less';
const AddExam: React.FC = () => {
  const [getExam, setExam] = useState<any[]>([]);
  const [getSub, setSub] = useState<any[]>([]);

  useEffect(() => {
    getExamType().then((res) => {
      setExam(res.data);
    });
  }, []);
  useEffect(() => {
    getExamSubject().then((res) => {
      setSub(res.data);
    });
  }, []);

  const { RangePicker } = DatePicker;

  const { Option } = Select;

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  const Demo = () => {
    const onFinish = (values: any) => {
      console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    return (
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <p>试卷名称</p>
        <Form.Item
          // label="试卷名称"
          name="username"
          rules={[{ required: true, message: '请输入试卷名称' }]}
        >
          <Input />
        </Form.Item>
        <p>请选择考试类型</p>
        <Form.Item name="选择考试类型" rules={[{ required: true }]}>
          <Select
          // placeholder="请选择考试类型"
          // onChange={onGenderChange}
          // allowClear
          >
            {getExam.map((item, index) => {
              return (
                <Option value={item.exam_name} key={index}>
                  {item.exam_name}
                </Option>
              );
            })}
            {/* getExam */}
          </Select>
        </Form.Item>

        <p>选择课程</p>
        <Form.Item name="请选择考试类型" rules={[{ required: true }]}>
          <Select
          // placeholder="请选择考试类型"
          // onChange={onGenderChange}
          // allowClear
          >
            {getSub.map((item, index) => {
              return (
                <Option value={item.subject_text} key={index}>
                  {item.subject_text}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <p>设置题量</p>
        <InputNumber min={3} max={10} defaultValue={3} />
        {/* <p></p> */}
        <p>考试时间</p>

        <Space direction="vertical" size={12}>
          <RangePicker showTime />
          {/* <RangePicker picker="week" />
          <RangePicker picker="month" />
          <RangePicker picker="year" /> */}
        </Space>
        {/* <p></p> */}
        <div className="xiaowo">
          {/* <Form.Item {...tailLayout}> */}
          <Button type="primary" htmlType="submit">
            创建试卷
          </Button>
          {/* </Form.Item> */}
        </div>
      </Form>
    );
  };
  return (
    <div className="addexam-wwz">
      <h1>添加考试</h1>
      <div className="input-wwz">
        <Demo />
      </div>
    </div>
  );
};

export default AddExam;
